<script>
  // #ifdef MP
  import RecursiveLists from './RecursiveLists.vue';
  import CharacterCard from './characterCard.vue';
  import Add from './add.vue';
  // #endif
  // #ifndef MP-WEIXIN
  import { defineAsyncComponent } from 'vue'
  // #endif

  export default {
    name: 'RecursiveLists',
    data() {
      return {
        generationList: [],
        generationListWidth: [],
        queryIndex: [],
        listWidth: 0,
      };
    },
    props: {
      children: {
        type: Array,
        default: () => {
          return [];
        },
      },
      isTopLevel: {
        type: Boolean,
        default: false,
      },
      is_init: 0,
      is_create: 0,
      generation: 0,
      id: 0,
    },
    components: {
      // #ifdef MP
      Add,
      CharacterCard,
      RecursiveLists,
      // #endif
      // #ifndef MP-WEIXIN
      // #endif
    },
    watch: {
      children: {
        deep: true,
        handler(newValue, oldValue) {
          let arr = newValue;
          for (let i = 0; i < arr.length; i++) {
            arr[i].isHave = arr[i].spouse_val.length == 0;
            for (let j = 0; j < arr[i].children.length; j++) {
              for (let k = 0; k < arr[i].spouse_val.length; k++) {
                if (arr[i].spouse_val[k].id == arr[i].children[j].mq_id) {
                  arr[i].spouse_val[k].mq_flag = true;
                }
              }
            }
          }
          this.generationList = arr;
        },
        immediate: true,
      },
    },
    mounted() {
      this.$nextTick(() => {
        if (this.children.length == 0) {
          uni.$emit('setCoordinate', {});
        }
      });
    },
    methods: {
      openAddPersonnelPopup(info) {
        this.$emit('openAddPersonnelPopup', info);
      },
      clickAdd() {
        this.$emit('clickAdd');
      },
      getListInfo(res) {
        this.queryIndex.push(res);
        let str = 0;
        this.queryIndex.forEach(item => {
          if (item.width > str) {
            str += item.width;
          }
        });
        this.listWidth = str;
        this.$emit('changeWidth');
        uni.$emit('changeWidth');
      },
      setWidth() {
        this.listWidth = 0;
        const query = uni.createSelectorQuery().in(this);
        query.selectAll('#generationList').boundingClientRect(res => {
          this.generationListWidth = [];
          for (let i = 0; i < res.length; i++) {
            this.generationListWidth.push(res[i].width);
          }
        }).exec();
      },
    },
  };
</script>

<template>
  <view class="flex">
    <template v-if="generationList.length > 0">
      <view v-for="(item, index) in generationList"
            :id="`generationList`"
            :key="index"
            class="flex flex-column align-center"
            style="position: relative"
      >
        <view v-if="!isTopLevel && generationList.length > 1"
              class="top"
              :class="{
                first: index == 0,
                last:index == generationList.length - 1
              }"
              :style="{
                width: index == 0 && !!item.isHave ? '50%' : index == generationList.length - 1 && (!!item.isHave ||  item.children.length > 1) ? (item.children.length > 1 && item.spouse_val.length > 0 ? `50%` : '50%') : index == generationList.length - 1 && (!!item.children ||  item.children.length <= 1) ?  (item.spouse_val.length > 0 ? `49%` : '29%') : index == 0 ? '50%' : index == generationList.length - 1 ? '50%' : '100%',
              }"
        ></view>
        <!-- 这里渲染每个子项的数据 -->
        <CharacterCard :isOwnFlag="false"
                       :info="item"
                       :isTopLevel="isTopLevel"
                       :index="index"
                       :is_create="is_create"
                       :is_init="is_init"
                       :length="generationList.length"
                       :generation="generation"
                       @addMember="openAddPersonnelPopup"
                       @openAddPersonnelPopup="openAddPersonnelPopup"
                       :id="item.id"
                       @getListInfo="getListInfo"
                       :listWidth="listWidth"
                       @setWidth="setWidth"
        ></CharacterCard>
        <!-- 递归调用自身来渲染子项的子项 -->
        <RecursiveLists :children="item.children" v-if="!!item.children && item.children.length > 0"
                        style="margin-top: 10rpx;" :is_create="is_create" :is_init="is_init"
                        :generation="generation + 1"
                        :id="item.id"
                        @openAddPersonnelPopup="openAddPersonnelPopup"
                        @changeWidth="setWidth"
        />
      </view>
    </template>
    <template v-else>
      <add id="add" @clickAdd="clickAdd"></add>
    </template>
  </view>
</template>

<style scoped lang="scss">
  .label {
    width: 117rpx;
    height: 220rpx;
    background: #6EA0FC;
    border-radius: 15rpx 15rpx 15rpx 15rpx;

    .text {
      width: 60rpx;
      height: 42rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .first {
    right: -1rpx;
  }

  .last {
    left: -1rpx;
  }

  .top {
    position: absolute;
    height: 4rpx;
    background: #707070;
  }
</style>